.skin-blue {
  .el-header {
    background-color: $background-color-blue !important;
    color: #434a50;
    padding: 0 !important;
    height: 50px !important;

    .compName {
      color: #fff;
    }

    .win {
      color: #fff;

      .el-icon:hover {
        background-color: #409eff;
      }
    }
  }

  .el-aside {
    background-color: $background-color-blue !important;
    color: #434a50;

    .menu {
      i {
        color: #909399;
      }
    }

    .active-menu {
      background-color: #dcdfe6;

      span {
        color: #0076f6;
      }

      i {
        color: #0076f6;
      }
    }
  }

  .el-container {
    height: 100%;
  }

  .el-main {
    background-color: #ffffff;
    color: #434a50;
    padding: 0 !important;

    // 按钮
    .button-blue {
      background: $btn-blue !important;
      border-radius: 4px;
      color: $bg-white !important;
      border: none;
      line-height: 16px;
    }

    .button-blue.is--disabled {
      border: #7dd8e6 !important;
      ;
      background: #7dd8e6 !important;
    }

    // // 操作按钮(删除)
    .button-red {
      background-color: $btn-red !important;
      border-radius: 4px;
      color: $bg-white !important;
      border: none;
      line-height: 16px;
    }

    .button-red.is--disabled {
      border: #f7b1b6 !important;
      ;
      background: #f7b1b6 !important;
    }


    // 按钮鼠标经过
    .button-blue:hover {
      border-color: $btn-blue !important;
      background: $btn-blue-hover !important;
    }

    .button-blue.is--disabled:hover {
      border-color: #7dd8e6 !important;
      background: #7dd8e6 !important;
    }

    .button-red:hover {
      border-color: $btn-red !important;
      background-color: $btn-red-hover !important;
    }

    .button-red.is--disabled:hover {
      border-color: #f7b1b6 !important;
      background: #f7b1b6 !important;
    }


    // 开关按钮颜色
    :deep(.is--on>.vxe-switch--button) {
      background-color: #00a4cd !important;
    }

    // 饿了么开关按钮颜色
    :deep(.el-switch__core) {
      border-color: #00a4cd !important;
      background-color: #00a4cd !important;
    }
  }

  // 左侧导航栏背景颜色
  .action-box {
    background-color: $background-color-blue !important;
  }

  // 左侧导航栏背景颜色
  .menuBoxLeft {
    background-color: $background-color-blue !important;
  }

  // 顶部导航栏底部背景色
  .el-menu-demo {
    background-color: $background-color-blue !important;
  }

  // 顶部导航栏文字颜色
  // .onemenubox {
  //   color: yellow !important;
  // }
  .same-skin-box {
    background-color: $background-color-blue !important;
  }

}

.skin-orange {
  .el-header {
    // background-color: #2e6daf;
    background: linear-gradient(to right, #2e6daf, #5a8fc6) !important;

    color: #434a50;
    padding: 0 !important;
    height: 50px !important;

    .compName {
      color: #fff;
    }

    .win {
      color: #fff;

      .el-icon:hover {
        background-color: #909399;
      }
    }
  }

  .el-aside {
    background-color: #538ac2;
    color: #434a50;

    .menu {
      i {
        color: #909399;
      }
    }

    .active-menu {
      background-color: #f2f2f2;

      span {
        color: #07c160;
      }

      i {
        color: #07c160;
      }
    }
  }

  .el-container {
    height: 100%;
  }

  .el-main {
    background-color: #ffffff;
    color: #434a50;
    padding: 0 !important;

    // 开关按钮颜色
    :deep(.is--on>.vxe-switch--button) {
      background-color: #00a4cd !important;
    }

    // 饿了么开关按钮颜色
    :deep(.el-switch__core) {
      border-color: #00a4cd !important;
      background-color: #00a4cd !important;
    }

    // 按钮
    .button-blue {
      background: linear-gradient(to bottom, #2e6daf, #5a8fc6) !important;
      border-radius: 4px;
      color: $bg-white !important;
      border: none;
      line-height: 16px;
    }

    .button-blue.is--disabled {
      border: #8eb8e3 !important;
      ;
      background: #8eb8e3 !important;
    }

    // // 操作按钮(删除)
    .button-red {
      background-color: $btn-red !important;
      border-radius: 4px;
      color: $bg-white !important;
      border: none;
      line-height: 16px;
    }

    .button-red.is--disabled {
      border: #f7b1b6 !important;
      ;
      background: #f7b1b6 !important;
    }

    // 按钮鼠标经过
    .button-blue:hover {
      border-color: $btn-blue !important;
      background: #6292c6 !important;
    }

    .button-blue.is--disabled:hover {
      border-color: #8eb8e3 !important;
      background: #8eb8e3 !important;
    }

    .button-red:hover {
      border-color: $btn-red !important;
      background-color: $btn-red-hover !important;
    }

    .button-red.is--disabled:hover {
      border-color: #f7b1b6 !important;
      background: #f7b1b6 !important;
    }

    // // 表格选中的这一项加深蓝色
    // .vxe-table--render-default .vxe-body--row.row--current {
    //   background: linear-gradient(to bottom, #29d8ac, #06916d) !important;
    //   color: white !important;
    // }
  }

  // 左侧导航栏背景颜色
  .action-box {
    background-color: #538ac2 !important;
  }

  // 左侧导航栏背景颜色
  .menuBoxLeft {
    background-color: #538ac2 !important;
  }

  // 顶部导航栏底部背景色
  .el-menu-demo {
    background: linear-gradient(to right, #2e6daf, #5a8fc6) !important;
  }

  // logo
  .logoBox {
    background-color: #538ac2 !important;
  }

  // 选中菜单颜色
  .isactive {
    border-left: 1px solid !important;
    border-right: 1px solid !important;
    border-image: linear-gradient(to bottom, #2e6daf, $bg-white) 10 !important;
    background: linear-gradient(to top, #16508c, #5a8fc6) !important;
  }

  // 鼠标经过菜单颜色
  .menuBox1:hover {
    background: linear-gradient(to bottom, #5a8fc6, #639bd5) !important;
    border-left: 1px solid !important;
    border-right: 1px solid !important;
    border-image: linear-gradient(to bottom, #2e6daf, $bg-white) 10 !important;
  }

  // 左侧菜单
  .leftBox {
    background: linear-gradient(to bottom, #2d5e91, #60adfd) !important;
    box-shadow:
      0px 1px 0px #60adfd,
      0px 0px 0px #2d5e91 !important;
    border-top: 1px solid #2d5e91 !important;
  }

  // 左侧菜单栏选中
  .leftBoxActive {
    background: $base-white !important;
    color: #2d5e91 !important;
    box-shadow:
      0px 1px 0px #2d5e91,
      0px 0px 0px #60adfd !important;
  }

  .same-skin-box {
    background-color: #2e6daf !important;
  }
}

.skin-gray {
  .el-header {
    // background-color: #fff;
    background: linear-gradient(to right, #fff, #fff) !important;
    color: #434a50;
    padding: 0 !important;
    height: 50px !important;
    border-bottom: 1px solid $border-color-1 !important;


    .compName {
      color: #434a50;
    }

    .win {
      color: #434a50;

      .el-icon:hover {
        background-color: $background-color-gray;
      }

      .menuBoxLeft {
        background-color: $background-color-gray;
      }
    }
  }

  .el-aside {
    background-color: #434a50;
    color: #ffffff;

    .menu {
      i {
        color: #ffffff;
      }
    }

    .active-menu {
      background-color: #0576b9;

      span {
        color: #ffffff;
      }

      i {
        color: #ffffff;
      }
    }
  }

  .el-container {
    height: 100%;
  }


  .el-main {
    background-color: #ffffff;
    color: #333;
    padding: 0 !important;

    // 开关按钮颜色
    :deep(.is--on>.vxe-switch--button) {
      background-color: #00a4cd !important;
    }

    // 饿了么开关按钮颜色
    :deep(.el-switch__core) {
      border-color: #00a4cd !important;
      background-color: #00a4cd !important;
    }

    // 按钮
    .button-blue {
      background-color: $btn-blue !important;
      border-radius: 4px;
      color: $bg-white !important;
      border: none;
      line-height: 16px;
    }

    .button-blue.is--disabled {
      border: #7dd8e6 !important;
      ;
      background: #7dd8e6 !important;
    }

    // 操作按钮(删除)
    .button-red {
      background-color: $btn-red !important;
      border-radius: 4px;
      color: $bg-white !important;
      border: none;
      line-height: 16px;
    }

    .button-red.is--disabled {
      border: #f7b1b6 !important;
      ;
      background: #f7b1b6 !important;
    }

    // 按钮鼠标经过
    .button-blue:hover {
      border-color: $btn-blue !important;
      background-color: $btn-blue-hover !important;
    }

    .button-blue.is--disabled:hover {
      border-color: #7dd8e6 !important;
      background: #7dd8e6 !important;
    }

    .button-red:hover {
      border-color: $btn-red !important;
      background-color: $btn-red-hover !important;
    }

    .button-red.is--disabled:hover {
      border-color: #f7b1b6 !important;
      background: #f7b1b6 !important;
    }

    // // 表格选中的这一项加深蓝色
    // .vxe-table--render-default .vxe-body--row.row--current {
    //   background: linear-gradient(to bottom, #29d8ac, #06916d) !important;
    //   color: white !important;
    // }
  }

  // 左侧导航栏背景颜色
  .action-box {
    background-color: #434a50 !important;
  }

  // 左侧导航栏底部背景颜色
  .menuBoxLeft {
    background-color: #434a50 !important;
  }

  // 顶部导航栏背景色
  .el-menu-demo {
    background: linear-gradient(to right, #fff, #fff) !important;
    border-bottom: 1px solid $border-color-1 !important;
  }

  // logo
  .logoBox {
    background-color: #434a50 !important;
  }

  // 选中菜单颜色
  .isactive {
    border-left: 1px solid !important;
    border-right: 1px solid !important;
    border-image: linear-gradient(to bottom, $bg-white, #bcdce1) 10 !important;
    background: linear-gradient(to bottom, #f3f3f3, #eaf3f4) !important;

    // 选中顶部菜单文字颜色
    .onemenubox {
      color: #434a50 !important;

      :deep(.el) {
        color: #434a50 !important;
      }
    }
  }

  // 鼠标经过菜单颜色
  .menuBox1:hover {
    background: linear-gradient(to bottom, #f3f3f3, #eaf3f4) !important;
    border-left: 1px solid !important;
    border-right: 1px solid !important;
    border-image: linear-gradient(to bottom, $bg-white, #bcdce1) 10 !important;
  }

  // 顶部菜单文字颜色
  .onemenubox {
    color: #7f7e7e !important;
  }

  .twomenubox {
    color: #7f7e7e !important;
  }

  // 左侧菜单
  .leftBox {
    background: linear-gradient(to top, #50575d, #6b747c) !important;
    border-top: 1px solid #6b747c !important;
    box-shadow:
      0px 1px 0px #909292,
      0px 0px 0px #565858 !important;
    color: #e2dddd !important;
  }

  // 左侧菜单栏选中
  .leftBoxActive {
    background: $background-color-blue !important;
    color: #fff !important;
  }

  .el-sub-menu__icon-arrow {
    color: #000 !important;
  }

  .same-skin-box {
    background-color: $background-color-gray !important;
  }
}

.skin-green {
  .el-header {
    // background-color: #11a983 !important;
    background: linear-gradient(to right, #089470, #0f888d) !important;
    color: #ffffff;
    padding: 0 !important;
    height: 50px !important;

    .compName {
      color: #ffffff;
    }

    .win {
      color: #ffffff;

      .el-icon:hover {
        background-color: #13c2c2;
      }
    }
  }

  .el-aside {
    background-color: #11a983 !important;
    color: #434a50;

    .menu {
      i {
        color: #909399;
      }
    }

    .active-menu {
      background-color: #f2f2f2;

      span {
        color: #13c2c2;
      }

      i {
        color: #13c2c2;
      }
    }
  }

  .el-container {
    height: 100%;
  }

  .el-main {
    background-color: #ffffff;
    color: #333;
    padding: 0 !important;

    // vxe开关按钮颜色
    :deep(.is--on>.vxe-switch--button) {
      background-color: #00a4cd !important;
    }

    // 饿了么开关按钮颜色
    :deep(.el-switch__core) {
      border-color: #00a4cd !important;
      background-color: #00a4cd !important;
    }

    // 按钮
    .button-blue {
      background: linear-gradient(to bottom, #29d8ac, #06916d) !important;
      border-radius: 4px;
      color: $bg-white !important;
      border: none;
      line-height: 16px;
    }

    .button-blue.is--disabled {
      border: #90d0af !important;
      ;
      background: #90d0af !important;
    }

    // // 操作按钮(删除)
    .button-red {
      background-color: $btn-red !important;
      border-radius: 4px;
      color: $bg-white !important;
      border: none;
      line-height: 16px;
    }

    .button-red.is--disabled {
      border: #f7b1b6 !important;
      ;
      background: #f7b1b6 !important;
    }

    // 按钮鼠标经过
    .button-blue:hover {
      border-color: #29d8ac !important;
      background: #29d8ac !important;
    }

    .button-blue.is--disabled:hover {
      border-color: #90d0af !important;
      background: #90d0af !important;
    }

    .button-red:hover {
      border-color: $btn-red !important;
      background-color: $btn-red-hover !important;
    }

    .button-red.is--disabled:hover {
      border-color: #f7b1b6 !important;
      background: #f7b1b6 !important;
    }


    // // 表格选中的这一项加深蓝色
    // .vxe-table--render-default .vxe-body--row.row--current {
    //   background: linear-gradient(to bottom, #29d8ac, #06916d) !important;
    //   color: white !important;
    // }
  }

  // 左侧导航栏背景颜色
  .action-box {
    background-color: #089470 !important;
  }

  // 左侧导航栏底部背景颜色
  .menuBoxLeft {
    background-color: #089470 !important;
  }

  // 顶部导航栏背景色
  .el-menu-demo {
    background: linear-gradient(to right, #089470, #0f888d) !important;
  }

  // logo
  .logoBox {
    background-color: #089470 !important;
  }

  // 选中菜单颜色
  .isactive {
    border-left: 1px solid !important;
    border-right: 1px solid !important;
    border-image: linear-gradient(to bottom, #089470, $bg-white) 10 !important;
    background-color: #0ca880 !important;
  }

  // 鼠标经过菜单颜色
  .menuBox1:hover {
    background-color: #16c699 !important;
    border-left: 1px solid !important;
    border-right: 1px solid !important;
    border-image: linear-gradient(to bottom, #089470, $bg-white) 10 !important;
  }

  // 左侧菜单
  .leftBox {
    // justify-items: center;
    background: linear-gradient(to bottom, #06916d, #29d8ac) !important;
    box-shadow:
      0px 1px 0px #29d8ac,
      0px 0px 0px #b6b8b8 !important;
    border-top: 1px solid #29d8ac !important;
  }

  // 左侧菜单栏选中
  .leftBoxActive {
    background: $base-white !important;
    color: #06916d !important;
  }

  .same-skin-box {
    background-color: #29d8ac !important;
  }
}